<template>
	<view class="content" @touchmove.stop.prevent="">
		<!--<refresh v-show="ind==current" v-for="(item,ind) in statusList.length"-->
				 <!--:top="`calc(${statusBarHeight}px + 280rpx)`" ref="refresh"   @isRefresh='refresherrefresh'></refresh>-->
			<Title @search="search" :input="true" :title="title" :imgList="imgList" @add="add" style="position: absolute,top:0"/>
			<!-- <view class="top">
				<view class="left">
					<view class="uni-list" style="width: 100%">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="yearIndex" :range="years">
									<view class="uni-input" style="display: flex;justify-content: center">
										{{years[yearIndex]}}年
										<image src="@/static/image/arrow_bottom_shixin.png"/>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="left">
					<view class="uni-list" style="width: 100%">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker :disabled="!yearIndex" @change="bindPickerChange2" :value="monthIndex" :range="months">
									<view class="uni-input" style="display: flex;justify-content: center">
										{{months[monthIndex]}}月
										<image src="@/static/image/arrow_bottom_shixin.png"/>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>-->
			<view  class="swiper_wrap">
				<view class="status" >
					<view  @click="current=index" v-for="(item,index) in statusList"
						   :style="{lineHeight:current==index?'64rpx':'54rpx',marginTop:current==index?'-6rpx':'0rpx',
					  color:current==index?'#00b9f9':'#9197AE',fontSize:current==index?'30rpx':'26rpx',fontWeight:current==index?'bold':''}"
					>{{item.name}}</view>
				</view>
			</view> 

		<swiper @change="change" class="swiper" :current="current"
				:style="{height:`calc(100vh - 172rpx - ${statusBarHeight+'px'})`}">
			<swiper-item v-for="(item,ind) in statusList" >
				<inspectItem ref="inspectItem" :i="item.value" :index="current" :keywords="param.keywords" :year="param.year" 
				:month="param.month"
					 :param="param"></inspectItem>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import Title from './components/title/index'
	import inspectItem from "./components/inspectItem/index.vue";
	export default {
		components: {
			Title,inspectItem
		},
		data() {
			return {
				height:'0px',
                imgList:[{
                	img:'add',
                	click:'add'
                }],
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight+7,
				title:'巡检任务',
				years:uni.getStorageSync('years'),
				yearIndex:0,
				months:uni.getStorageSync('months'),
				monthIndex:0,
				statusList:[{name:'全部',value:''},
                {name:'已发起',value:'0'},{name:'处理中',value:'1'},{name:'已完结',value:'2'}],
				current:0,
				param:{
					year:'',
					month:'',
					keywords:''
				},
			}
		},
		onShow(){
			for(let i=0;i<4;i++){
				if(i==this.current){
                    setTimeout(()=>{
                        this.$refs.inspectItem[i].triggerDownScroll()
                    },100)
				}else{
                    setTimeout(()=>{
                        this.$refs.inspectItem[i].clear()
                    },100)
				}
			}
		},
		onLoad(options) {

		},
		methods: {
            add(){
            	uni.navigateTo({
            		url:'./inspectionAdd'
            	})
            },
			search(keywords){
				this.param.keywords=keywords
				setTimeout(()=>{
					this.$refs.inspectItem[this.current].resetParam()
				},10)
			},
			bindPickerChange(e){
				if(this.yearIndex==e.target.value){
					return
				}
				this.yearIndex = e.target.value
				if(!this.yearIndex){
					this.monthIndex=0
				}
				this.param.year=this.years[this.yearIndex]
				if(this.param.year=='全部'){
					this.param.year=''
				}
				this.param.month=this.months[this.monthIndex]
				if(this.param.month=='全部'){
					this.param.month=''
				}else if(this.param.month<10){
					this.param.month='0'+this.param.month
				}
				setTimeout(()=>{
					this.$refs.inspectItem[this.current].resetParam()
				},10)
			},
			bindPickerChange2(e){
				if(this.monthIndex==e.target.value){
					return
				}
				this.monthIndex = e.target.value
				this.param.month=this.months[this.monthIndex]
				if(this.param.month=='全部'){
					this.param.month=''
				}else if(this.param.month<10){
					this.param.month='0'+this.param.month
				}
				setTimeout(()=>{
					this.$refs.inspectItem[this.current].resetParam()
				},10)
			},
			change(e){
				this.current=e.target.current
				setTimeout(()=>{
					this.$refs.inspectItem[this.current].resetParam()
				},10)
				
			},
		}
	}
</script>
<style lang="less" scoped>
    /* #ifndef APP-NVUE */
    body {
    	font-size: 30rpx;
    	line-height: 2em;
    	color: #333;
    	font-family: Helvetica Neue, Helvetica, sans-serif;
    }
    
    view,
    text {
    	font-size: 30rpx;
    	line-height: 2em;
    	color: #333;
    }
    
    page {
    	background: #fff;
    }
    
    button {
    	width: 100%;
    }
    /* #endif */
	.content {
		background: #F5F6F9;
		.top{
			padding:32rpx 32rpx 28rpx 32rpx;
			display: flex;
			line-height: 48rpx;
			.left{
				height: 48rpx;
				color: #454E64;
				font-size: 24rpx;
				background: white;
				border-radius: 24rpx;
				width: 192rpx;
				margin-right: 40rpx;
				image{
					width: 18rpx;
					height: 18rpx;
					display: flex;
					margin:16rpx 0 0 14rpx;
				}
			}
			.left:active{
				background: #e6e6e6;
			}
		}
		.swiper_wrap{
			// width: calc(100vw - 64rpx);
			// margin-left: 32rpx;
            // margin-top: 28rpx;
			background: white;
			border-radius:8rpx 8rpx 0 0;
			.status{
				padding: 16rpx 0rpx;
				line-height: 40rpx;
                display: flex;
                view{
                    width: 25vw;
                    text-align: center;
                }
			}
		}
		.swiper{
			background: white;
            // background-color: red;
			// margin-left: 32rpx;
			// width: calc(100vw - 64rpx);
			.scroll{
				width: 100%;
				.nodata{
					text-align: center;
					font-size:28rpx;
					font-weight:400;
					color:rgba(31,33,66,1);
					line-height:40rpx;
					padding-top: 40rpx;
					image{
						width: 34rpx;
						height: 42rpx;
					}
				}
				.item:active{
					background: #e6e6e6;
				}
				.item{
					display: flex;
					flex-wrap: wrap;
					width: calc(100% - 48rpx);
					margin-left:24rpx;
					padding:  32rpx 0;
					background: #FAFBFA;
					border-radius:8rpx;
					image{
						width: 136rpx;
						height: 144rpx;
						display: block;
					}
					.right{
						width: calc(100% - 184rpx);
						margin-left: 24rpx;
					}
					.title{
						font-size:28rpx;
						font-weight:600;
						color:#1F2142;
						line-height:40rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						image{
							width: 22rpx;
							height: 24rpx;
							margin:6rpx 22rpx 0 0;
						}
					}
					.time{
						margin: 8rpx 0;
						display: flex;
						justify-content: space-between;
						width: calc(100vw - 96rpx);c
						.index{
							min-width:20rpx;
							padding: 0 6rpx;
							height:32rpx;
							background: red;
							border-radius: 32rpx;
							border: 2rpx solid rgba(86,140,229,1);
							justify-content: center;
							color: white;
							background-image: linear-gradient(90deg,rgba(86,140,229,1) 0%,rgba(58,200,221,1) 100%);
							margin-right: 16rpx;
						}
						text{
							font-size: 24rpx;
							color:#9197AE;
						}
						view{
							display: flex;
							font-size: 22rpx;
							color:#62CBAA;
							image{
								width: 32rpx;
								height: 32rpx;
								margin:0rpx 4rpx 0 0;
							}
						}

					}
					.progress{
						display: flex;
						margin: 30rpx 0;
						font-size: 26rpx;
						color: #454E64;
						padding-bottom: 30rpx;
						border-bottom: 2rpx solid #F5F5F5;
						view{
							width: 50%;
						}
						view:first-child{
							border-right: 2rpx solid rgb(236,237,241);
							padding-right: 40rpx;
						}
						view:last-child{
							padding-left: 40rpx;
						}
					}
					.details{
						font-size:28rpx;
						font-weight:400;
						color: #9197B0;
						display: flex;
						text{
							color: #454E64;
						}
						.details_right{
							view{
								width: 100%;
								overflow:hidden;
								text-overflow:ellipsis;
								display:-webkit-box;
								-webkit-box-orient:vertical;
								-webkit-line-clamp:1
							}
						}
					}
				}
			}
		}


	}
</style>
